<link rel="import" href="../../../html/polymer.html">

<link rel="import" href="multidevice_setup_browser_proxy.html">
<link rel="import" href="multidevice_setup_shared_css.html">
<link rel="import" href="ui_page.html">
<link rel="import" href="ui_page_container_behavior.html">
<link rel="import" href="../../../cr_elements/cr_input/cr_input.html">
<link rel="import" href="../../../html/cr.html">

<dom-module id="password-page">
  <template>
    <style include="multidevice-setup-shared">
      #user-info-container  {
        align-items: center;
        color: var(--cros-text-color-secondary);
        display: flex;
        padding-top: 32px;
      }

      #profile-photo {
        border-radius: 50%;
        height: 20px;
        margin-inline-end: 8px;
        width: 20px;
      }

      #passwordInput {
        height: 32px;
        margin-top: 48px;
        width: 100%;
      }

      :host-context([orientation=horizontal]) #passwordInput {
        width: min(calc(var(--multidevice-setup-dialog-width) -
            2 * var(--multidevice-setup-dialog-content-padding)), 640px);
      }

      :host-context([orientation=vertical]) #passwordInput {
        width: min(calc(var(--multidevice-setup-dialog-width) -
            2 * var(--multidevice-setup-dialog-content-padding)), 480px);
      }

      :host-context([orientation=vertical]) #content-container {
        align-items: center;
        display: flex;
        flex-direction: column;
      }

      :host-context([orientation=horizontal]) #user-info-container {
        padding-top: 0;
      }
    </style>
    <ui-page header-text="[[i18nDynamic(locale, 'passwordPageHeader')]]"
        icon-name="google-g">
      <div id="content-container" slot="message">
        <div id="user-info-container">
          <img id="profile-photo" src="[[profilePhotoUrl_]]"></img>
          <span id="email">[[email_]]</span>
        </div>
        <cr-input id="passwordInput" type="password"
            placeholder="[[i18nDynamic(locale, 'enterPassword')]]"
            invalid="[[passwordInvalid_]]"
            error-message="[[i18nDynamic(locale, 'wrongPassword')]]"
            value="{{inputValue_}}"
            aria-disabled="false"
            on-keypress="onInputKeypress_">
        </cr-input>
      </div>
    </ui-page>
  </template>
  <script src="password_page.js"></script>
</dom-module>
